<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        nav {
            font-size: 1.5rem;
            background-color: #21D4FD;
            background-image: -webkit-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -moz-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: -o-linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
        }
        h1 {
            font-size: 2rem;
            color: white;
        }
        li {
            margin: 10px 20px;
        }
        th {
            width: 100px;
        }
        label{
            width: 100px;
            font-weight: 800;
        }
    </style>
</head>
<body>
<!--导航栏替换-->
<div th:replace="~{commons/commons :: topbar(active='books.html')}"></div>

<div class="container">
    <table class="table">
        <tr>
            <th>书名</th>
            <td th:text="${book.getName()}"></td>
        </tr>
        <tr>
            <th>作者</th>
            <td th:text="${book.getAuthor()}"></td>
        </tr>
        <tr>
            <th>出版社</th>
            <td th:text="${book.getPublish()}"></td>
        </tr>
        <tr>
            <th>ISBN</th>
            <td th:text="${book.getIsbn()}"></td>
        </tr>
        <tr>
            <th>简介</th>
            <td th:text="${book.getIntroduction()}"></td>
        </tr>
        <tr>
            <th>价格</th>
            <td th:text="${book.getPrice()}"></td>
        </tr>
        <tr>
            <th>状态</th>
            <div th:switch="${book.getState()}">
                <td th:case="1" style="color:green">在馆</td>
                <td th:case="0" style="color:red">缺货</td>
            </div>
        </tr>
    </table>
    <form th:action="@{'/reader/book/lend/' + ${book.getBookId()} + '/' + ${session.username} + '/' + ${book.getState()}}" method="post">
        <div class="input-group">
            <label for="days">&nbsp;&nbsp;&nbsp;天数</label>
            <select class="custom-select" id="days" name="days">
                <option selected>---请选择---</option>
                <option value="7">一周</option>
                <option value="14">两周</option>
                <option value="30">一月</option>
            </select>
        </div>
        &nbsp;&nbsp;&nbsp<span th:text="${msg}" style="color:red"></span>
        <br>
        &nbsp;&nbsp;&nbsp;<input type="submit" value="借    阅" class="btn btn-outline-primary btn-lg">
        <a th:href="@{/reader/book/books}" class="btn btn-outline-secondary btn-lg" style="margin-left: 40px">取&nbsp;&nbsp;&nbsp;&nbsp;消</a>
    </form>
    <!--<a href="#" class="btn btn-outline-info btn-lg">借&nbsp;&nbsp;&nbsp;&nbsp;阅</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
    <!--<a th:href="@{/reader/book/books}" class="btn btn-outline-primary btn-lg">返&nbsp;&nbsp;&nbsp;&nbsp;回</a>-->
</div>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>